<template>
	<div>
		<myheader>发现</myheader>
		<header>
			<ul>
				<li v-for="l in list">
					<div class="headerleft"><p :style="{color:l.title_color}">{{l.title}}</p><p>{{l.subtitle}}</p></div>
					<div style="float: left;"><img :src="'https://fuss10.elemecdn.com/'+ jpeg(l.main_pic_hash)" alt="" /></div>
				</li>
			</ul>
		</header>
		<section><img src="../../assets/img/1.png" width="100%"/></section>
		<section class="delicate">
			<div class="deltop">
				<p><i class=" icon-thumbs-up"></i>&nbsp;<span>美食特推</span></p>
				<p>你的口味我都懂得</p>
			</div>
			<ul>
				<li v-for="de in delicate">
					<img :src="'https://fuss10.elemecdn.com/'+ jpeg(de.foods[0].image_hash)" alt="" />
					<span>{{de.foods[0].name}}</span><br />
					<span>￥{{de.foods[0].price}}元</span>
				</li>
			</ul>
			<div class="lookmore">查看更多>></div>
		</section>
		<!--//特价商品-->
		<section class="delicate">
			<div class="deltop">
				<p><i class=" icon-thumbs-up"></i>&nbsp;<span>天天特价</span></p>
				<p>特价商品，一网打尽</p>
			</div>
			<ul>
				<li v-for="lo in lowprice">
					<img :src="'https://fuss10.elemecdn.com/'+ jpeg(lo.image_hash)" alt="" />
					<span>{{lo.food_name}}</span><br />
					<span>￥{{lo.price}}元</span>&nbsp;&nbsp;<del>{{lo.original_price}}</del>
				</li>
			</ul>
			<div class="lookmore">查看更多>></div>
		</section>
		<!--限时好礼-->
		<section class="delicate">
			<div class="deltop">
				<p><i class=" icon-thumbs-up"></i>&nbsp;<span>限时好礼</span></p>
				<p>小积分换豪礼</p>
			</div>
			<ul>
				<li v-for="g in gift">
					<img :src="'https://fuss10.elemecdn.com/'+ jpeg(g.image_hash)" alt="" />
					<span>{{g.title}}</span><br />
					<span>{{g.points_required}}分</span>&nbsp;&nbsp;<del>{{g.original_price}}</del>
				</li>
			</ul>
			<div class="lookmore"><router-link to="find/gift">查看更多>></router-link></div>
		</section>
		<div style="height: 32px;"></div>
	</div>
</template>


<script type="text/javascript">
	import axios from 'axios'
	import myheader from '../header'
	export default{
		name:'message',
		components:{
			myheader
		},
		data:function(){
			return {
				list:{},
				delicate:{},
				lowprice:{},
				gift:{}
			}
		},
		methods:{
			jpeg:function(value){
  				var out 				
  				var result = value.substring(value.length-3)
  				if(result == 'peg'){
  					out = value + '.jpeg'
  				}else{
  					out = value + '.png'
  				}
  				var result1 = out.substring(0,1) + '/' + out.substring(1,3) + '/' + out.substring(3)
  				return result1
  			}
		},
		created:function(){
			axios.get('https://mainsite-restapi.ele.me/member/v1/discover?platform=2&block_index=0')
			.then(function(res){
				this.list = res.data[1]
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//美食推荐
			axios.get('https://mainsite-restapi.ele.me/hotfood/v1/guess/likes?latitude=34.6836&longitude=113.5325&offset=0&limit=3&request_id=41eaf0e8-c31f-4b8a-b79e-fb296d5d2fc8&tag_id=-1&columns=1')
			.then(function(res){
				this.delicate = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//天天特价
			axios.get('https://mainsite-restapi.ele.me/shopping/v1/discount/food?latitude=34.6836&longitude=113.5325&offset=0&limit=3')
			.then(function(res){
				this.lowprice = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
			//积分换豪礼
			axios.get('https://mainsite-restapi.ele.me/member/gifts/suggest')
			.then(function(res){
				this.gift = res.data
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
		}
	}
	
</script>

<style type="text/css" scoped="">
	*{box- sizing: border-box;overflow-x: hidden;}
    header ul{display: flex;justify-content:center;flex-wrap: wrap;}
	header li{width: 50vw; list-style: none;height: 100px;padding: 20px;height:93px;}
	.headerleft{float: left;width: 120px;}
	.headerleft p:nth-of-type(1){font-size: 20px;}
	.headerleft p:nth-of-type(2){font-size: 12px;color:#666666 ;}
	header li img{width: 45px;}
	.delicate{margin:20px 0px;background: white; padding: 10px 0px;border-top:1px solid gainsboro ;border-bottom:1px solid gainsboro ;}
	.delicate ul{display: flex; flex-wrap: nowrap;justify-content:space-around;}
	.delicate li{list-style: none;width: 120px;}
	.delicate li span:nth-of-type(1){font-size:14px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
	.delicate li span:nth-of-type(2){color: red;font-size: 14px;}
	.delicate img{width: 120px;height: 120px;border-radius:10px ;}
	/*标题*/
	.deltop{text-align: center;margin: 10px 0px;}
	.deltop i{color: orange;}
	.deltop p:nth-of-type(1){font-size: 18px;font-weight: 800;}
	.deltop p:nth-of-type(2){font-size: 12px; color: gray;}
	
	/*天天特价*/
	.lookmore{text-align: center;font-size: 12px;color: gray;margin: 10px;}
	del{font-size: 12px;}
</style>